<script setup lang="ts">
import {computed, onMounted, reactive, ref} from "vue";
import {Message, PaginationProps} from "@arco-design/web-vue";
import {appResult, getPushCount, postProject, pushList, pushNum, unitResult, updataStatus} from "@/services/newsApi.ts";
import type {getPushCountType, PushListDataType} from "@/types/newsType.ts";
import {tableBorder} from "@/utils/border/table-border.ts";
import useLoadingStore from "@/stores/modules/useLoadingStore.ts";

const { setLoading } = useLoadingStore()

const formData = reactive({
  num: 0
})

const data = ref<any[]>([])

const pushCount = reactive<getPushCountType>({
  total: 0,
  notFiled: 0,
  pushedOut: 0
})

const formSearch = reactive<PushListDataType>({
  reportStauts: 0,
  projectName: ''
})

const pagination = reactive<PaginationProps>({
  total: 0,
  current: 1,
  showTotal: true,
  pageSize: 10,
});

const handlePushCount = () => {
  getPushCount().then((res) => {
    if (res.code === 200) {
      pushCount.total = res.data.total
      pushCount.notFiled = res.data.notFiled
      pushCount.pushedOut = res.data.pushedOut
    }
  })
}

const getList = () => {
  pushList({
    current: pagination.current,
    size: pagination.pageSize,
    data: formSearch
  }).then(res => {
    if (res.code === 200) {
      pagination.total = res.data.total;
      pagination.current = res.data.current;
      pagination.pageSize = res.data.size;
      data.value = res.data.records
    }
  })
}

const handlePush = () => {
  if (formData.num === 0) {
    Message.warning('可推送数据不得为0')
    // return;
  }
  setLoading(true)
  //
  pushNum(formData.num).then(res => {
    if (res.code === 200) {
      const pids = res.data.basice.map((item: any) => item.pid)
      const list = [
        postProject(res.data.basice),
        unitResult(res.data.unit),
        appResult(res.data.application)
      ]
      Promise.all(list).then(r => {
        const map = r.map(item => item.data).filter(item => item.status === 'success')
        if (map.length === 3) {
          editStatus(pids)
        } else {
          setLoading(false)
          for (const item of map) {
            Message.error(item.msg)
          }
        }
      }).catch(() => {
        setLoading(false)
      })
    } else {
      setLoading(false)
    }
  }).catch(() => {
    setLoading(false)
  }).finally(() => {
    setLoading(false)
  })
}

function editStatus (list: string[]) {
  updataStatus(list).then((res) => {
    if (res.code === 200) {
      Message.success('推送成功')
    }
  }).finally(mounted)
}

const handleSearch = () => {
  pagination.current = 1;
  getList();
}

const handleReset = () => {
  pagination.current = 1;
  formSearch.reportStauts = 0;
  formSearch.projectName = '';
  getList();
}

const handlePageChange = (page: number) => {
  pagination.current = page;
  getList();
};

function mounted () {
  setLoading(false)
  getList()
  handlePushCount()
}

onMounted(mounted)

const columns = [
  {
    title: "序号",
    dataIndex: "index",
    align: "center",
    width: 80,
    slotName: "index",
  },
  {
    title: "项目名称",
    dataIndex: "projectName",
    align: "center",
  },
  {
    title: "项目来源",
    dataIndex: "projectSource",
    align: "center",
  },
  {
    title: "赛道",
    dataIndex: "channel",
    align: "center",
  },
  {
    title: "赛题",
    dataIndex: "dataDirection",
    align: "center",
  },
  {
    title: "推送状态",
    dataIndex: "reportStauts",
    align: "center",
    slotName: "reportStauts",
  }
]


const max = computed<number>(() => {
  if (pushCount.notFiled <= 100) {
    return pushCount.notFiled
  }

  return 100
})

</script>

<template>
  <a-space
      class="container"
      direction="vertical"
  >
    <a-card>
      <div class="title">
        <span>总共{{ pushCount.total }}条数据，已推送{{ pushCount.pushedOut }}条数据，剩余{{ pushCount.notFiled }}条数据</span>
        <strong style="color: #ff4f4f">&nbsp;（推送数量不可超过剩余数量并且最大可输入数量不可超过100）</strong>
      </div>
      <a-form layout="inline">
        <a-form-item>
          <a-input-number :max="max" v-model="formData.num" placeholder="请输入推送多少条数据"/>
        </a-form-item>
        <a-form-item>
          <a-button @click="handlePush" type="primary">推送</a-button>
        </a-form-item>
      </a-form>
    </a-card>
    <a-card>
      <div class="tabletools">
        <a-form layout="inline">
          <a-form-item label="项目名称">
            <a-input v-model="formSearch.projectName" placeholder="请输入项目名称"/>
          </a-form-item>
          <a-form-item label="推送状态">
            <a-select placeholder="请选择推送状态" v-model="formSearch.reportStauts">
              <a-option :value="1">已推送</a-option>
              <a-option :value="0">未推送</a-option>
            </a-select>
          </a-form-item>
          <a-form-item>
            <a-space>
              <a-button
                  type="primary"
                  @click="handleSearch"
              >
                <template #icon>
                  <icon-search />
                </template>
                <span>查询</span>
              </a-button>
              <a-button @click="handleReset">
                <template #icon>
                  <icon-refresh />
                </template>
                <span>重置</span>
              </a-button>
            </a-space>
          </a-form-item>
        </a-form>
      </div>
      <a-table
          :columns="columns"
          :data="data"
          @page-change="handlePageChange"
          :bordered="tableBorder"
          :pagination="pagination"
      >
        <template #index="{rowIndex}">
          {{ (pagination.current - 1) * pagination.pageSize + rowIndex + 1 }}
        </template>
        <template #reportStauts="{ record }">
          <span>{{ record.reportStauts === 1 ? '已推送' : '未推送' }}</span>
        </template>
      </a-table>
    </a-card>
  </a-space>
</template>

<style scoped lang="scss">
.title {
  margin-bottom: 20px;
}
</style>